{% block sw_order_product_select %}
<span class="sw-order-product-select">
    {% block sw_order_product_select_blank_item %}

    <mt-text-field
        v-if="isShownItemLabelInput"
        v-model="item.label"
        v-bind="$attrs"
        size="small"
        :placeholder="$tc('sw-order.detailBase.columnProductName')"
    />
    {% endblock %}

    {% block sw_order_product_select_existing_product %}
    <!-- eslint-disable vue/valid-v-else-if -->
    <sw-entity-single-select
        v-else-if="isShownProductSelect"
        v-model:value="product"
        class="sw-order-product-select__single-select"
        :context="contextWithInheritance"
        :criteria="productCriteria"
        entity="product"
        size="small"
        show-clearable-button
        @update:value="onItemChanged"
    >
        <template #selection-label-property="{ item }">
            <slot
                name="selection-label-property"
                v-bind="{ item }"
            >
                {% block sw_order_product_select_results_variant_info %}
                <sw-product-variant-info :variations="item.variation">
                    {{ item.translated.name || item.name }}
                </sw-product-variant-info>
                {% endblock %}
            </slot>
        </template>

        <template #result-item="{ item, index }">
            <slot
                name="result-item"
                v-bind="{ item, index }"
            >
                <sw-select-result
                    v-bind="{ item, index }"
                >
                    {% block sw_order_product_select_results_list_result_label %}
                    <sw-product-variant-info :variations="item.variation">
                        {{ item.translated.name || item.name }}
                    </sw-product-variant-info>
                    {% endblock %}
                </sw-select-result>
            </slot>
        </template>
    </sw-entity-single-select>
    {% endblock %}

    {% block sw_order_product_show_product %}
    <template v-else>
        <span class="sw-order-product-select__label">
            {{ item.label }}
        </span>
    </template>
    {% endblock %}
</span>
{% endblock %}
